<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<style>
		* {
			list-style: none;//去除li等标签的点
			text-decoration: none;
		}

		.shell {
			width: 500px;
			height: 900px;
			position: relative;
			overflow-x: hidden;   //溢出的图片被隐藏起来
			border-radius: 5px;
			border: 10px #fff solid;
			box-shadow: 20px 30px 20px rgba(0, 0, 0, .5);
		}

		.images {
			width: 400%;
			height: 100%;
			display: flex;
			position: absolute;
			left: 0;
			transition: .2s;
			list-style: none;
		}

		.img {
			width: 100%;
			background-size: cover;   //标记
		}

		.img:nth-child(1) {
			background-image: url("img/goOutService_Img/1.png");
		}

		.img:nth-child(2) {
			background-image: url("img/goOutService_Img/2.png");
		}

		.img:nth-child(3) {
			background-image: url("img/goOutService_Img/3.png");
		}
		.img:nth-child(4) {
			background-image: url("img/goOutService_Img/4.png");
		}

		.min-images {
			display: flex;
			justify-content: space-evenly;
			position: absolute;
			bottom: 20px;
			width: 40%;
			z-index: 1;
			right: 10%;
		}

		.min {
			width: 60px;
			height: 60px;
			/* 鼠标悬浮时显示按钮指针 */
			cursor: pointer;
			border-radius: 50%;
			background-size: cover;
			border: solid 5px rgba(255, 255, 255, 0.5);
			/* 照片偏移量 */
			background-position: -20px 0;
		}

		.min:nth-child(1) {
			background-image: url("img/goOutService_Img/1.png");
		}

		.min:nth-child(2) {
			background-image: url("img/goOutService_Img/2.png");
		}

		.min:nth-child(3) {
			background-image: url("img/goOutService_Img/3.png");
		}
		.min:nth-child(4) {
			background-image: url("img/goOutService_Img/4.png");
		}

		.button {
			width: 100%;
			height: 100%;
/* 			position: absolute; */
			display: flex;
			justify-content: space-between;
			user-select: none;
		}

		.button-left,
		.button-right {
			font-size: 50px;
			padding: 0 20px;
			line-height: 500px;
			cursor: pointer;
			z-index: 999;
		}
		.button-left:hover,
		.button-right:hover{
			background-color: rgba(160, 190, 255, 0.7);
		}
	</style>
	<body>
		<!-- 轮播图开始 -->
		<div class="shell">
			
			<ul class="images">
				<li class="img"></li>
				<li class="img"></li>
				<li class="img"></li>
				<li class="img"></li>
			</ul>

			<ul class="min-images">
				<li class="min"></li>
				<li class="min"></li>
				<li class="min"></li>
				<li class="min"></li>
			</ul>
			
			<div class="button">
				<div class="button-left"><</div>
				<div class="button-right">></div>
			</div>
			
	    </div>
<!-- 轮播图结束 -->
	</body>
	<script>
		let left = document.querySelector('.button-left')
		let right = document.querySelector('.button-right')
		let min = document.querySelectorAll('.min')
		let images = document.querySelector('.images')

		let index = 0
		let time

		function position() {
			images.style.left = (index * -100) + "%"
		}

		function add() {
			if (index >= min.length - 1) {
				index = 0
			} else {
				index++
			}
		}

		function desc() {
			if (index < 1) {
				index = min.length - 1
			} else {
				index--
			}
		}

		function timer() {
			time = setInterval(() => {
				index++
				desc()
				add()
				position()
			}, 3000)
		}
		left.addEventListener('click', () => {
			desc()
			position()
			clearInterval(time)
			timer()
		})
		right.addEventListener('click', () => {
			add()
			position()
			clearInterval(time)
			timer()
		})
		for (let i = 0; i < min.length; i++) {
			min[i].addEventListener('click', () => {
				index = i
				position()
				clearInterval(time)
				timer()
			})
		}
		timer()
	</script>
</html>
